<script setup>
import { onMounted } from 'vue'
import { useCartStore } from '@/stores/cartStore'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const cartStore = useCartStore()
const router = useRouter()

// 单选回调
const singleCheck = (v, isChecked) => {
	cartStore.singleCheck(v, isChecked)
}
// 全选按钮
const allCheck = (isChecked) => {
	cartStore.allCheck(isChecked)
}
// 删除所选商品
const delAllCart = () => {
	cartStore.delCart()
}
// 修改商品数量
const countChange = (item, count) => {
	const newCount = item.count + count
	if (newCount == 0) {
		// 如果减到0
		ElMessage({
			type: 'warning',
			message: '不能再减了'
		})
	} else if (item.stock < newCount) {
		ElMessage({
			type: 'warning',
			message: '购买数量不可大于库存数量'
		})
	} else {
		cartStore.changeCount(item, count)
		item.count = newCount
	}
}

// 点击结算
const handleConfirm = () => {
	const arr = cartStore.cartList.some((item) => item.isChecked)
	if (arr) {
		router.push('/checkout')
	} else {
		ElMessage({
			type: 'warning',
			message: '请先勾选商品再结算'
		})
	}
}

onMounted(() =>
	// 更新购物车
	cartStore.updateNewList()
)
</script>

<template>
	<div class="cart-page">
		<div class="container m-top-20">
			<div class="cart">
				<div class="title">
					<div class="left">
						<div class="left-title">我的购物车</div>
						<div class="left-num">({{ cartStore.allCount }})</div>
					</div>
					<div class="right">
						<el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delAllCart">
							<template #reference>
								<div class="right-del">
									<img class="icon-del" src="../../assets/images/delete.png" alt="" srcset="" />
									删除选中商品
								</div>
							</template>
						</el-popconfirm>

						<div class="right-all">
							<label class="text-all" for="ck1"> 全选 </label>
							<el-checkbox id="ck1" :model-value="cartStore.cartList.length && cartStore.isAll" @change="allCheck" />
						</div>
					</div>
				</div>
				<table>
					<!-- 商品列表 -->
					<tbody>
						<tr v-for="item in cartStore.cartList" :key="item.cartItemId">
							<td width="45%" class="goods" @click="$router.push(`/detail/${item.spuId}`)">
								<img :src="item.imgUrl" alt="" />
								<p class="name">{{ item.spuName }} - {{ item.skuName }}</p>
							</td>
							<td class="tc tc-number" width="10%">
								<span class="number-icon plus" @click="countChange(item, -1)">-</span>
								<span class="number">{{ item.count }}</span>
								<span class="number-icon subtract" @click="countChange(item, 1)">+</span>
							</td>
							<td class="tc" width="15%">
								<p>&yen;{{ (item.skuPriceFee / 100).toFixed(2) }}</p>
							</td>
							<td class="tc" width="30%">&yen;{{ (item.count * (item.skuPriceFee / 100)).toFixed(2) }}</td>
							<td width="24px">
								<el-checkbox :model-value="item.isChecked" :true-value="1" :false-value="0" @change="(isChecked) => singleCheck(item, isChecked)" />
							</td>
						</tr>
						<tr>
							<td width="45%"></td>
							<td class="tc" width="10%"></td>
							<td class="tc" width="15%"></td>
							<td class="tc" width="30%">
								合计 ： <span class="num">¥ {{ (cartStore.selectedPrice / 100).toFixed(2) }} </span>
							</td>
							<td width="24px"></td>
						</tr>
						<tr v-if="!cartStore.cartList || cartStore.cartList.length == 0">
							<td colspan="6">
								<div class="cart-none">
									<el-empty description="购物车列表为空">
										<el-button @click="$router.push('/')" type="primary">随便逛逛</el-button>
									</el-empty>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				<!-- 操作栏 -->
				<div class="action">
					<div class="batch">
						<div class="left">
							已选择
							<span class="num"> {{ cartStore.selectedCount }} </span> 件商品
						</div>
						<div class="right">
							共计 <span class="num">¥ {{ (cartStore.selectedPrice / 100).toFixed(2) }} </span>
						</div>
					</div>
					<div class="submit" @click="handleConfirm">结算</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.cart-page {
	margin-top: 20px;
	.container {
		width: auto;
		margin: 0 160px;
		padding-bottom: 290px;
	}
	.cart {
		background: #fff;
		color: #666;
		padding-top: 50px;

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 24px;
			border-bottom: 1px solid #c8c9cb;
			.left {
				display: flex;
				align-items: center;
				.left-title {
					font-size: 20px;
					color: #060709;
					line-height: 30px;
					margin-right: 22px;
				}
				.left-num {
					font-size: 16px;
					color: $xtxColor;
					line-height: 24px;
				}
			}
			.right {
				display: flex;
				align-items: center;
				.right-del {
					display: flex;
					align-items: center;
					font-size: 16px;
					color: #999999;
					line-height: 24px;
					margin-right: 50px;
					cursor: pointer;

					.icon-del {
						background: #fff !important;
						width: 24px;
						height: 24px;
						margin-right: 10px;
					}
				}

				.right-all {
					display: flex;
					align-items: center;

					.text-all {
						font-size: 16px;
						color: #000000;
						line-height: 24px;
						padding-right: 10px;
						cursor: pointer;
					}
				}
			}
		}

		table {
			border-spacing: 0;
			border-collapse: collapse;
			line-height: 24px;
			width: 100%;
			tr {
				border-bottom: 1px solid #f4f4f4;
			}

			tr:last-of-type {
				border-bottom: 0;
				td {
					padding: 11px 0 0 0;
				}
			}

			td {
				padding: 24px 0;

				&:first-child {
					text-align: left;
					// padding-left: 30px;
					// color: #999;
				}
				&:nth-child(3) {
					text-align: left;
					padding-left: 22px;
					font-size: 14px;
					color: #060709;
					line-height: 21px;
				}
				&:nth-child(4) {
					text-align: right;
					padding-right: 57px;
					font-size: 14px;
					color: #333333;
					line-height: 21px;

					.num {
						font-weight: 700;
						font-size: 24px;
						color: $xtxColor;
						line-height: 36px;
					}
				}
				&:nth-child(5) {
					width: 24px;
				}
			}

			th {
				font-size: 16px;
				font-weight: normal;
				line-height: 50px;
			}

			.tc-number {
				min-width: 120px;
				.number-icon {
					cursor: pointer;
					font-size: 16px;
					color: #060709;
					padding: 0 10px;
				}
				.number {
					display: inline-block;
					width: 36px;
					height: 36px;
					background: #f4f4f4;
					border-radius: 4px 4px 4px 4px;
					align-items: center;
					font-size: 12px;
					color: #060709;
					line-height: 36px;
				}
			}
		}
	}

	.cart-none {
		text-align: center;

		p {
			color: #999;
			padding: 20px 0;
		}
	}

	.tc {
		text-align: center;

		a {
			color: $xtxColor;
		}

		.xtx-numbox {
			margin: 0 auto;
			width: 120px;
		}
	}

	.red {
		color: $priceColor;
	}

	.green {
		color: $xtxColor;
	}

	.f16 {
		font-size: 16px;
	}

	.goods {
		width: 100%;
		display: flex;
		align-items: center;
		cursor: pointer;
		img {
			width: 50px;
			height: 50px;
			margin-right: 20px;
		}

		.name {
			width: 200px;
			font-size: 14px;
			color: #333333;
			line-height: 21px;
		}
	}

	.action {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw - 320px);
		display: flex;
		height: 80px;
		align-items: center;
		font-size: 24px;
		color: #ffffff;
		line-height: 36px;
		.xtx-checkbox {
			color: #999;
		}

		.batch {
			flex: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24px 30px 24px 42px;
			background-color: #d2a36c;

			.num {
				font-weight: 700;
			}
		}
		.submit {
			flex: 1;
			background-color: $xtxColor;
			font-weight: 900;
			padding: 24px 0;
			text-align: center;
			cursor: pointer;
		}
	}

	.tit {
		color: #666;
		font-size: 16px;
		font-weight: normal;
		line-height: 50px;
	}
}
:deep(.el-checkbox) {
	/* 背景透明 */
	.el-checkbox__inner {
		background: transparent;
	}
	/* 选中样式 */
	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background: $xtxColor;
		border: 1px solid $xtxColor;
	}
	/* 大小 */
	.el-checkbox__inner {
		width: 24px;
		height: 24px;
	}
	/* 对勾样式 */
	.el-checkbox__inner::after {
		border: 1px solid #fff;
		border-left: 0;
		border-top: 0;
		left: 9px;
		top: 5px;
	}
	.el-checkbox__input.is-checked .el-checkbox__inner::after {
		transform: rotate(50deg) scaleY(2) scaleX(2);
	}
}

:deep(.el-input-number) {
	width: 130px;
	// 设置输入框的高度
	.el-input__inner {
		height: 36px;
		line-height: 36px;

		font-size: 12px;
		color: #060709;
		line-height: 18px;
	}
}
</style>